<template>
    <div id="background">
        <el-form ref="loginForm"
                 :model="loginForm"
                 class="loginContainer"
                 :rules="rules">
            <h3 class="loginTitle">登录</h3>
            <el-form-item prop="username">
                <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名" @blur="inputValidate"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码" show-password @blur="inputValidate"></el-input>
            </el-form-item>
            <el-form-item prop="captcha">
                <el-input class="loginCaptcha" type="text" auto-complete="false" v-model="loginForm.captcha" placeholder="点击图片更换验证码" @blur="inputValidate"></el-input>
                <img :src="captchaUrl" @click="updateCaptcha()" />
            </el-form-item>
            <el-checkbox class="loginRemember" v-model="checked">记住我</el-checkbox>
            <el-button ref="loginButton" type="primary" style="width: 100%"
                       @click="submitLogin"
                       :disabled=disabled
                       v-loading.fullscreen.lock="loading"
                       element-loading-text="登陆中" >登录
            </el-button>
        </el-form>
    </div>
</template>

<script>

export default {
    name: "Login",
    data() {
        return {
            loginForm: {
                username: 'Admin',
                password: '781080032',
                captcha: ''
            },
            // captchaUrl: '/api/captcha?time='+new Date(),
            captchaUrl: '/captcha?time='+new Date(),
            checked: true,
            rules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: "blur"},
                    {min: 3, max: 20, message: '长度在3-20个字符之间', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 6, max: 20, message: '长度在6-20个字符之间', trigger: 'blur'}
                ],
                captcha: [
                    {required: true, message: '请输入验证码', trigger: 'blur'},
                    {min: 4, max: 4, message: '长度有误', trigger: 'blur'}
                ]
            },
            disabled: true,
            loading: false
        }
    },
    methods: {
        updateCaptcha(){
            // this.captchaUrl = '/api/captcha?time='+new Date();
            this.captchaUrl = '/captcha?time='+new Date();
        },
        submitLogin() {
            this.loading = true;
            let loginParam = JSON.parse(JSON.stringify(this.loginForm));
            loginParam.password = this.$md5((loginParam.password));
            // this.postRequest('/api/login',loginParam).then(resp=>{
            this.postRequest('/login',loginParam).then(resp=>{
                if(resp){
                    //从登陆请求的response中提取出token
                    const tokenStr = resp.obj.tokenHead+resp.obj.token;
                    //存入sessionStorage中
                    window.sessionStorage.setItem('tokenStr',tokenStr);
                    //如果没有重定向redirect,就直接跳转去首页
                    //如果有redirect,就跳转至重定向前的地址
                    let path = this.$route.query.redirect;
                    this.$router.replace((path==='/'||path===undefined)?'/manage/radiation':path);
                }
            }).finally(()=>{
                //移除登陆时的加载动画
                this.loading = false;
            })
        },
        inputValidate() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.disabled = false;
                    return true;
                } else {
                    this.disabled = true;
                    return false;
                }
            });
        }
    },
    mounted() {
        this.updateCaptcha();
    }
}
</script>

<style>
#background{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../artsSource/background-pic.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.loginContainer {
    border-radius: 15px;
    background-clip: padding-box;
    /*margin: 180px auto;*/
    margin: 10% 15% auto auto;
    width: 350px;
    padding: 15px 35px 15px 35px;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 5px #c6cac6;
}

.loginContainer .loginTitle {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #FFFFFF;
}

.loginContainer .loginCaptcha {
    width: 250px;
    margin-right: 5px;
}

.loginContainer .loginRemember {
    text-align: left;
    margin: 0px 0px 15px 0px;
}

.el-checkbox__input.is-checked+.el-checkbox__label{
    color: #FFFFFF !important;
}

.el-form-item__content{
    display: flex;
    align-items: center;
}
</style>